<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .aaa {
            background-color: antiquewhite;
        }

        .bbb {
            background-color: aquamarine;
        }

        .cccaaa {
            background-color: blue;
        }
        .accc {
            background-color: salmon;
        }
        .cssc{
            border: 1px solid  seagreen;
        }
        .caac{
      
            border: 1px solid  seagreen;
        }
        /* 1属性选择 */
        li[style] {
            color:yellow;
        }
        /* 2属性严格匹配 */
        li[class="aaa"]{
            font-weight: 900;
        }
        /* 3属性包含 */
        li[class*="aaa"]{
            display: inline-block;
        }
        /* 4属性在前匹配 */
        li[class^="a"]{
          font-size: 29px;
        }
        /* 5属性在后匹配 */
        li[class$="a"]{
            list-style: none;
        }


        

    </style>
</head>

<body>

    <p>aaaaaaaaaa</p>

    <ul>
        <li style="background-color: blueviolet">aaaaaaaaaaaaaaa</li>
        <li class="aaa">bbbbbbbbbbbbbbb</li>
        <li class="cccaaa">ccccccccccccc</li>
        <li class="accc">dddddddddddddddddd</li>
        <li class="cssc">eeeeeeeeeeeeeeee</li>
        <li>fffffffffffffff</li>
        <li>gggggggggggggg</li>
    </ul>

</body>

</html>